<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vhall Stream Saver - 下载管理器</title>
  <link rel="stylesheet" href="options.css">
</head>
<body>
  <div class="container">
    <!-- Header -->
    <header class="header">
      <div class="header-content">
        <div class="logo">
          <img src="icons/icon32.png" alt="Vhall Stream Saver" class="logo-icon">
          <h1 class="title">微流下载器 - 下载管理器</h1>
        </div>
        <div class="header-actions">
          <button id="refreshBtn" class="btn btn-secondary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="23 4 23 10 17 10"></polyline>
              <polyline points="1 20 1 14 7 14"></polyline>
              <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
            </svg>
            刷新
          </button>
          <button id="settingsBtn" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="m12 1 1.68 2.32L16 4l.68 2.32L19 8l-.32 1.68L20 12l-1.32 1.68L19 16l-2.32.68L15 19l-1.68-.32L12 20l-1.68-1.32L8 19l-.68-2.32L5 16l.32-1.68L4 12l1.32-1.68L5 8l2.32-.68L9 5l1.68.32L12 1z"></path>
            </svg>
            设置
          </button>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="main-content">
      <!-- Sidebar -->
      <aside class="sidebar">
        <nav class="nav">
          <a href="#downloads" class="nav-item active" data-tab="downloads">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="7,10 12,15 17,10"></polyline>
              <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
            下载任务
          </a>
          <a href="#streams" class="nav-item" data-tab="streams">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="m22 8-6 4 6 4V8Z"></path>
              <rect width="14" height="12" x="2" y="6" rx="2" ry="2"></rect>
            </svg>
            检测到的流
          </a>
          <a href="#settings" class="nav-item" data-tab="settings">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="m12 1 1.68 2.32L16 4l.68 2.32L19 8l-.32 1.68L20 12l-1.32 1.68L19 16l-2.32.68L15 19l-1.68-.32L12 20l-1.68-1.32L8 19l-.68-2.32L5 16l.32-1.68L4 12l1.32-1.68L5 8l2.32-.68L9 5l1.68.32L12 1z"></path>
            </svg>
            设置
          </a>
          <a href="#help" class="nav-item" data-tab="help">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10"></circle>
              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
              <path d="M12 17h.01"></path>
            </svg>
            帮助
          </a>
        </nav>

        <!-- System Status -->
        <div class="system-status">
          <h3>系统状态</h3>
          <div class="status-item">
            <span class="status-label">yt-dlp:</span>
            <span id="ytdlpStatus" class="status-value checking">检查中...</span>
          </div>
          <div class="status-item">
            <span class="status-label">内置下载器:</span>
            <span class="status-value available">可用</span>
          </div>
          <div class="status-item">
            <span class="status-label">检测到的流:</span>
            <span id="streamCount" class="status-value">0</span>
          </div>
        </div>
      </aside>

      <!-- Content Area -->
      <div class="content-area">
        <!-- Downloads Tab -->
        <div id="downloadsTab" class="tab-content active">
          <div class="tab-header">
            <h2>下载任务</h2>
            <div class="tab-actions">
              <button id="clearCompletedBtn" class="btn btn-secondary">清除已完成</button>
              <button id="pauseAllBtn" class="btn btn-secondary">暂停全部</button>
            </div>
          </div>

          <div class="downloads-container">
            <div id="downloadsEmpty" class="empty-state">
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="empty-icon">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7,10 12,15 17,10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
              <h3>暂无下载任务</h3>
              <p>使用插件弹窗开始下载视频流</p>
            </div>

            <div id="downloadsList" class="downloads-list hidden">
              <!-- 动态生成的下载任务列表 -->
            </div>
          </div>
        </div>

        <!-- Streams Tab -->
        <div id="streamsTab" class="tab-content">
          <div class="tab-header">
            <h2>检测到的流</h2>
            <div class="tab-actions">
              <button id="clearStreamsBtn" class="btn btn-secondary">清空列表</button>
              <button id="exportStreamsBtn" class="btn btn-primary">导出列表</button>
            </div>
          </div>

          <div class="streams-container">
            <div id="streamsEmpty" class="empty-state">
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="empty-icon">
                <path d="m22 8-6 4 6 4V8Z"></path>
                <rect width="14" height="12" x="2" y="6" rx="2" ry="2"></rect>
              </svg>
              <h3>未检测到视频流</h3>
              <p>请访问微吼直播页面，插件将自动检测可下载的视频流</p>
            </div>

            <div id="streamsList" class="streams-list hidden">
              <!-- 动态生成的流列表 -->
            </div>
          </div>
        </div>

        <!-- Settings Tab -->
        <div id="settingsTab" class="tab-content">
          <div class="tab-header">
            <h2>设置</h2>
          </div>

          <div class="settings-container">
            <div class="settings-section">
              <h3>下载设置</h3>
              <div class="setting-item">
                <label for="defaultQuality">默认下载质量:</label>
                <select id="defaultQuality" class="form-control">
                  <option value="best">最佳质量</option>
                  <option value="1080p">1080p</option>
                  <option value="720p">720p</option>
                  <option value="480p">480p</option>
                </select>
              </div>
              <div class="setting-item">
                <label for="downloadPath">下载路径:</label>
                <input type="text" id="downloadPath" class="form-control" placeholder="默认下载文件夹">
              </div>
              <div class="setting-item">
                <label class="checkbox-label">
                  <input type="checkbox" id="autoDownload">
                  <span class="checkmark"></span>
                  检测到流时自动下载
                </label>
              </div>
            </div>

            <div class="settings-section">
              <h3>yt-dlp 设置</h3>
              <div class="setting-item">
                <label for="ytdlpPath">yt-dlp 路径:</label>
                <div class="input-group">
                  <input type="text" id="ytdlpPath" class="form-control" placeholder="自动检测">
                  <button id="browseYtdlpBtn" class="btn btn-secondary">浏览</button>
                </div>
              </div>
              <div class="setting-item">
                <label for="ytdlpArgs">额外参数:</label>
                <input type="text" id="ytdlpArgs" class="form-control" placeholder="--format best">
              </div>
              <div class="setting-item">
                <button id="installYtdlpBtn" class="btn btn-primary">安装 yt-dlp</button>
                <button id="testYtdlpBtn" class="btn btn-secondary">测试连接</button>
              </div>
            </div>

            <div class="settings-section">
              <h3>高级设置</h3>
              <div class="setting-item">
                <label class="checkbox-label">
                  <input type="checkbox" id="enableLogging">
                  <span class="checkmark"></span>
                  启用详细日志
                </label>
              </div>
              <div class="setting-item">
                <label class="checkbox-label">
                  <input type="checkbox" id="enableNotifications">
                  <span class="checkmark"></span>
                  启用下载通知
                </label>
              </div>
              <div class="setting-item">
                <label for="maxConcurrentDownloads">最大并发下载数:</label>
                <input type="number" id="maxConcurrentDownloads" class="form-control" min="1" max="10" value="3">
              </div>
            </div>

            <div class="settings-actions">
              <button id="saveSettingsBtn" class="btn btn-primary">保存设置</button>
              <button id="resetSettingsBtn" class="btn btn-secondary">重置设置</button>
            </div>
          </div>
        </div>

        <!-- Help Tab -->
        <div id="helpTab" class="tab-content">
          <div class="tab-header">
            <h2>帮助</h2>
          </div>

          <div class="help-container">
            <div class="help-section">
              <h3>使用说明</h3>
              <ol>
                <li>访问微吼直播页面（支持 gslb.e.vhall.com、*.vhallyun.com、*.vhall.com）</li>
                <li>插件会自动检测页面中的视频流</li>
                <li>点击插件图标打开弹窗，查看检测到的视频流</li>
                <li>选择要下载的视频流，点击下载按钮</li>
                <li>如果安装了 yt-dlp，将优先使用 yt-dlp 下载</li>
                <li>否则使用内置下载器或复制下载命令</li>
              </ol>
            </div>

            <div class="help-section">
              <h3>下载策略</h3>
              <div class="strategy-item">
                <h4>1. Native yt-dlp（推荐）</h4>
                <p>使用本地安装的 yt-dlp 进行下载，支持最多的网站和格式。</p>
              </div>
              <div class="strategy-item">
                <h4>2. 内置 HLS 下载器</h4>
                <p>使用浏览器内置的下载器处理 HLS 流，适用于简单的 m3u8 文件。</p>
              </div>
              <div class="strategy-item">
                <h4>3. 命令复制</h4>
                <p>复制 yt-dlp 命令到剪贴板，用户可以手动执行下载。</p>
              </div>
            </div>

            <div class="help-section">
              <h3>安装 yt-dlp</h3>
              <div class="install-guide">
                <h4>Windows:</h4>
                <code>winget install yt-dlp</code>
                <p>或下载可执行文件：<a href="https://github.com/yt-dlp/yt-dlp/releases" target="_blank">GitHub Releases</a></p>
                
                <h4>macOS:</h4>
                <code>brew install yt-dlp</code>
                
                <h4>Linux:</h4>
                <code>pip install yt-dlp</code>
              </div>
            </div>

            <div class="help-section">
              <h3>常见问题</h3>
              <div class="faq-item">
                <h4>Q: 为什么检测不到视频流？</h4>
                <p>A: 请确保访问的是支持的微吼直播页面，并且页面已完全加载。</p>
              </div>
              <div class="faq-item">
                <h4>Q: yt-dlp 显示不可用怎么办？</h4>
                <p>A: 请按照上述说明安装 yt-dlp，或在设置中手动指定 yt-dlp 路径。</p>
              </div>
              <div class="faq-item">
                <h4>Q: 下载失败怎么办？</h4>
                <p>A: 可以尝试复制下载命令手动执行，或检查网络连接和权限设置。</p>
              </div>
            </div>

            <div class="help-section">
              <h3>关于</h3>
              <p>Vhall Stream Saver (微流下载器) v1.0.0</p>
              <p>专业的微吼直播流下载工具，支持智能流嗅探、HLS下载和yt-dlp集成。</p>
              <p>开源项目，欢迎贡献代码和反馈问题。</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- Toast Container -->
  <div id="toastContainer" class="toast-container"></div>

  <script src="options.js"></script>
</body>
</html>